<template>
    <view class="score" v-bind:style="{top:statusBarHeight+'px'}">
        <view class="scoreView" v-on:click="$emit('addScoreClick')">
            <image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image>
            <view class="text">
                {{score}}
            </view>
            <image class="add" src="../../static/shouye/ic_add.png" mode="aspectFill"></image>
        </view>
    </view>
</template>

<script>
    import Vue from 'vue';
    import {
        getStatusBarHeight,
        getTitleBarHeight,
        getNavBarHeight,
        getLeftIconLeft
    } from "@/utils/system.js";

    export default {
        props: {
            level: {
                type: Number,
                default: 1
            },
            score: {
                type: Number,
                default: 0
            },
			statusBarHeight: {
			    type: Number,
			    default: 0
			}
        },
        data() {
            return {};
        },
		mounted() {
		
		},
		onShow() {
			 this.statusBarHeight = getStatusBarHeight();
		},
        methods: {}
    };
</script>

<style lang="scss" scoped>
 .score {
        position: fixed;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        // margin-left: 200rpx;
        padding: 5rpx 10rpx;

        z-index: 999;

     .scoreView {
            border-radius: 45rpx;
            width: fit-content;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 22px;
            padding: 5rpx 15rpx;
            font-weight: 700;
            color: black;

         .coin {
                height: 50rpx;
                width: 50rpx;
            }

         .add {
                height: 30rpx;
                width: 30rpx;
            }

         .text {
                color: white;
                margin-left: 20rpx;
                margin-right: 20rpx;
            }
        }
    }
</style>